import {Select} from 'antd';

import querystring from 'querystring';
import {listByIndicator} from "@/pages/RadarChart/base/DataLoad";
import React from "react";

const {Option} = Select;

let timeout;
let currentValue;


export default class SelectSearch extends React.Component {
  state = {
    data: null,

    value: null,
  };
  valueData = [];

  fetch(value, callback) {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
    currentValue = value;
    let func = this.props.load;
    let cState = (data) => this.setState(data);

    function load() {
      if (func) {
        func(value, (data) => {

          cState({data: data});

        });
      }
    }

    timeout = setTimeout(load, 500);
  }


  handleSearch = value => {
    if (value) {
      this.fetch(value, data => this.setState({data}));
    } else {
      this.setState({data: []});
    }
  };

  handleChange = (value, type) => {
    if (type == null) {
      type = "change";
    }
    this.setState({value: value});
    if (this.props.onChange) {
      let map = {};
      let data = [];
      for (let d of this.mergeSource(this.state.data, this.valueData)) {
        map[d.value] = d;
      }

      if (this.props.mode == 'multiple') {
        if (!value instanceof Array) {
          value = [value];
        }
        for (let v of value) {
          let get = map[v];
          if (get) {
            data.push(get);
          }
        }
      } else {
        let get = map[value];
        if (get) {
          data.push(get);
        }
      }
      this.valueData = data;
      this.props.onChange(value, data, type);
    }
  };

  mergeSource(data1, data2) {
    if (data2 == null) {
      data2 = [];
    }
    if (data1 == null) {
      data1 = [];
    }
    let res = [];
    let set = new Set();

    for (let item of data1) {
      if (!set.has(item.value)) {
        res.push(item);
        set.add(item.value);
      }
    }
    for (let item of data2) {
      if (!set.has(item.value)) {
        res.push(item);
        set.add(item.value);
      }
    }
    return res;
  }

  render() {
    if (this.state.data == null) {
      this.state.data = [];
    }
    if (this.props.data) {
      this.valueData = this.props.data;
    }
    let dataSource = this.mergeSource(this.state.data, this.valueData);


    if (this.state.value == null && this.props.defaultValue) {

      if (!this.props.defaultValue instanceof Array || this.props.defaultValue.length > 0) {
        this.handleChange(this.props.defaultValue, "init");
      }
    }

    if (this.props.mode == "multiple" && this.state.value == null) {
      this.state.value = [];
    }
    const options = dataSource.map(d => {
      if (this.props.exclude == null || this.props.exclude.indexOf(d.value) == -1) {
        return <Option key={d.value}>{d.name}</Option>
      }
      return "";
    });

    return (
      <Select

        showSearch
        value={this.state.value}
        placeholder={this.props.placeholder}
        style={this.props.style}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={this.handleSearch}
        onChange={(value) => {
          this.handleChange(value);
        }}
        mode={this.props.mode}
        notFoundContent={null}
      >
        {options}
      </Select>
    );
  }
}
